import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Mobuimg from '../img/diy/mobu.png'
import Mobuicon from '../img/diy/mobuicon.png'
import WelcomeLayer from './WelcomeLayer.js'
class Facialmaskpage1 extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	        title:'膜布',
            filmcloth:{
                dname:"",
                name:""
            },
            words: [
                {
                    "title": "优选进口蚕丝膜布",
                    "description": "精选超长蚕丝纤维，混合活性蚕丝蛋白，近似人体皮肤极度亲和，完美服帖、温柔不刺激，轻、透、软、薄、有弹性。吸水锁水性强，蚕丝蛋白中含有对人体极具营养价值的18种氨基酸。能有效抑制皮肤中黑色素的生产。"
                },
                {
                    "title": "植物纤维天丝膜布",
                    "description": "天然植物萃取纤维，双层超柔软触感，紧密服帖肌肤，透气性好，无粘腻感，纤维内部空隙较大，可吸收更多精华成分，皮肤吸收更多精华液。天丝纤维表面圆滑饱满，是敏感性肌肤最佳选择。使用后能迅速自然分解，环保无污染。"
                },
                {
                    "title": "竹炭纤维黑膜布",
                    "description": "天然竹炭纤维添加上好备长炭，超强吸附清理肌肤残留杂质脏污，净化皮肤，收敛毛孔、保湿透亮。膜布相对较厚，柔软服帖，不粘腻，舒适，透气。"
                }
            ]

	    }
	}
	componentWillMount(){

	}
    componentDidMount(){     
        this.selectCondition()
    }
    selectCondition(){
        var _this=this
        var clickEvt=function(ele){
            if(ele.flag){
                let filmcloth
                if(ele.index==0){
                    filmcloth={
                        dname:"进口蚕丝膜布（双层）",
                        name:"mobu-a"
                    }
                }else{
                    if(ele.index==1){
                        filmcloth={
                            dname:"植物纤维天丝膜布（双层）",
                            name:"mobu-b"
                        }
                    }else{
                        filmcloth={
                            dname:"竹炭纤维黑膜布（单层）",
                            name:"mobu-c"
                        }
                    }
                }
                _this.setState({
                    filmcloth:filmcloth
                })
            }else{
                _this.setState({
                    filmcloth:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback(_this.state.filmcloth)
            
            var a = [];
            var p = ele.parentNode.children;
            for(var i = 0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var showTab=function(ele){     
            if(ele.flag==true){
                content[0].classList.remove("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                    if(items[i] === ele) {
                        contents[i].classList.add("fmp-select-tip-active")
                    } else {
                        contents[i].classList.remove("fmp-select-tip-active")
                    }
                }
            }else{
                content[0].classList.add("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                        contents[i].classList.remove("fmp-select-tip-active")
                }
            }
        }
        var items=document.querySelectorAll(".fmp1-select-content");
        var content=document.querySelectorAll(".fmp1-st-exp")
        var contents=document.querySelectorAll(".fmp1-st-explain");
        for(let i=0;i<items.length;i++){
            items[i].flag=false;
            items[i].index=i;
            items[i].addEventListener("click",function(e){ 
                this.flag=(this.flag==true)?false:true;
                clickEvt(this);
                showTab(this)  
            });
        }
    }
    clickScroll(){
        this.props.clickBack(1);
    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
            <div className="fmp-container" style={{top: "0"}} id="fmpage1">
            	<div className="fmt-container boxshaw">
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span>{this.state.title}</span>
                </div>
            	<Facialmaskylcs words={this.state.words}/>
            	<div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Mobuimg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                    {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
                <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                        <p>点击下面挑挑<span className="fmp-select-title-span">膜布</span>吧<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp1-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                            <div className="fmp-sc-detail">
                                <img src={Mobuicon}/>
                                <p>进口蚕丝<br/>膜布<br/>(双层)</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp1-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <img src={Mobuicon}/>
                                <p>植物纤维天丝<br/>膜布<br/>(双层)</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp1-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <img src={Mobuicon}/>
                                <p>竹炭纤维黑<br/>膜布<br/>(单层)</p>
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp1-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">好的膜布可以让皮肤更好的吸收哦！</p></div>
                        <div className="fmp1-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">蚕丝：长纤维、弹性超好、很容易调整、超服帖</p></div>
                        <div className="fmp1-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">天丝：植物短纤维、很服帖、易吸附(易于吸收精华液)</p></div>
                        <div className="fmp1-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">功效</span><p className="fmp-select-tip-wz">黑膜：植物短纤维、深度清洁、很服帖(易于贴合皮肤)</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>
                </div>
               
            </div>
        )
    }
}


export default Facialmaskpage1;